<template>
  <header class="header">
    <button style="float: left" class="reset-btn"
            @click="goback"><i class="el-icon-arrow-left"></i>退出</button>
    <el-form :inline="true" size="mini" style="float: left;margin-left: 10px;margin-top: 10px;">
      <el-form-item label="分辨率">
        <el-select v-model="value"  @change="selectChange" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.label"
            :label="item.label"
            :value="item.value"
           >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item v-if="value == 0" label="宽">
        <el-input-number v-model="editorTheme.canvasWidth">
        </el-input-number>
      </el-form-item>

      <el-form-item v-if="value == 0" label="高" >
        <el-input-number  v-model="editorTheme.canvasHeight">
        </el-input-number>
      </el-form-item>
      <el-form-item label="标题">
        <el-input v-model="editorTheme.title">
        </el-input>
      </el-form-item>
      <el-form-item label="备注">
        <el-input v-model="editorTheme.description">
        </el-input>
      </el-form-item>
    </el-form>
    <div class="right-panel">
      <el-button style="margin-right: 10px"  @click="save"
                 class="preview"
                 type="success"
                 :loading="loading"
                 size="small">保存</el-button>
      <el-button style="margin-right: 10px" @click="deploy"
                 class="preview"
                 type="info"
                 :loading="loading" size="small">预览</el-button>
      <el-button   @click="playAnimate"
                 class="preview"
                 type="info"
                 :loading="loading" size="small">播放动画</el-button>
    </div>
  </header>
</template>

<script>
import tools from '../util/tools'
export default {
  props: ['type'],
  data () {
    return {
      loading: false,
      options: [
        {label: '自定义', value: 0, op: null},
        {label: '1024*600', value: 1, op: {width: 1024, height: 600}},
        {label: '1024*768', value: 2, op: {width: 1024, height: 768}},
        {label: '1280*720', value: 3, op: {width: 1280, height: 720}},
        {label: '1280*800', value: 4, op: {width: 1280, height: 800}},
        {label: '1280*1024', value: 5, op: {width: 1280, height: 1024}},
        {label: '1366*768', value: 6, op: {width: 1366, height: 768}},
        {label: '1440*900', value: 7, op: {width: 1440, height: 900}},
        {label: '1440*1050', value: 8, op: {width: 1440, height: 1050}},
        {label: '1600*1200', value: 9, op: {width: 1600, height: 1200}},
        {label: '1680*1050', value: 10, op: {width: 1680, height: 1050}},
        {label: '1920*1080', value: 11, op: {width: 1920, height: 1080}},
        {label: '1920*1200', value: 12, op: {width: 1920, height: 1200}}
      ],
      value: 0,
      cus: false
    }
  },
  mounted () {
    this.getResolution()
    if (this.type !== 'skin') {
      this.editorTheme.canvasWidth = '1280'
      this.editorTheme.canvasHeight = '720'
    }
    for (let i = 0; i < this.options.length; i++) {
      if (this.options[i].op.width === this.$store.state.editor.editorTheme.canvasWidth &&
        this.options[i].op.height === this.$store.state.editor.editorTheme.canvasHeight) {
        this.value = i
        break
      }
    }
    // this.value = [1280, 720]
  },
  watch: {
    editorTheme () {
      for (let i = 0; i < this.options.length; i++) {
        if (this.options[i].op.width === this.$store.state.editor.editorTheme.canvasWidth &&
          this.options[i].op.height === this.$store.state.editor.editorTheme.canvasHeight) {
          this.value = i
          break
        }
      }
    }
  },

  computed: {
    editorTheme () {
      return this.$store.state.editor.editorTheme
    }
  },
  methods: {
    deploy () {
      this.loading = true
      let save = 'saveTheme'
      if (this.type === 'skin') {
        save = 'saveSkin'
      }
      this.$store.dispatch(save, tools.vue2json(this.$store.state.editor.editorTheme)).then(() => {
        setTimeout(() => {
          this.$emit('saveThemeSuccess')
          this.loading = false
        }, 1000)
      })
    },
    playAnimate () {
      this.$store.dispatch('playAnimate')
    },
    save () {
      let save = 'saveTheme'
      if (this.type === 'skin') {
        save = 'saveSkin'
      }
      console.log('save===='+save)
      console.log(tools.vue2json(this.$store.state.editor.editorTheme))
      return this.$store.dispatch(save, tools.vue2json(this.$store.state.editor.editorTheme)).then(() => {
        const h = this.$createElement
        let self = this
        console.log('this.$store.state.res_code', this.$store.state.editor.res_code)
        if (this.$store.state.editor.res_code === 0) {
          this.$msgbox({
            title: '消息',
            message: h('p', null, [
              h('span', null, self.type === 'skin' ? '主题' : '节目'),
              h('i', { style: 'color: teal' }, self.editorTheme.title),
              h('span', null, '已保存')
            ]),
            showCancelButton: true,
            confirmButtonText: '退出',
            cancelButtonText: '发布',
            beforeClose: (action, instance, done) => {
              if (action === 'confirm') {
                self.$router.back()
              } else {
                self.$router.push('/publish-add')
                done()
              }
            }
          }).then(action => {
          })
        } else {
          this.$message.error(this.$store.state.editor.res_msg)
        }
      })
    },
    selectChange () {
      console.log('this.options[this.value].op.width', this.options[this.value].op.width)
      console.log('this.editorTheme.canvasWidth', this.editorTheme.canvasWidth)
      if (this.options[this.value].op == null) {
        this.value = 0
      }
      this.editorTheme.canvasWidth = this.options[this.value].op.width
      this.editorTheme.canvasHeight = this.options[this.value].op.height
    },
    goback: function () {
      const h = this.$createElement
      let self = this
      this.$msgbox({
        title: '消息',
        message: h('p', null, [
          h('span', null, '你正在编辑节目，退出后将不会保存')
        ]),
        showCancelButton: true,
        confirmButtonText: '退出',
        cancelButtonText: '继续编辑',
        beforeClose: (action, instance, done) => {
          if (action === 'confirm') {
            self.$router.back()
          } else {
            done()
          }
        }
      }).then(action => {
      })
      // this.$router.back()
    },
    getResolution () {
      this.$http({
        url: this.$http.adornUrl('/generator/stb/resolution'),
        method: 'get'
      }).then(({data}) => {
        if (data && data.code === 0) {
          var list = [{label: '自定义', value: 0, op: null}]
          var ops = data.list
          for (var i = 0; i < ops.length; i++) {
            list.push({label: ops[i].width + '*' + ops[i].height, value: i + 1, op: ops[i]})
          }
          console.log('options', list)
          this.options = list
          for (let i = 0; i < this.options.length; i++) {
            if (this.options[i].op.width === this.$store.state.editor.editorTheme.canvasWidth &&
              this.options[i].op.height === this.$store.state.editor.editorTheme.canvasHeight) {
              this.value = i
              break
            }
          }
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.header {
  z-index: 2!important;
  height: 55px;
  width:100%;
  background-color: #ececec;
  color: #373f42;
  position: fixed;
  .reset-btn {
    height: 100%;
    padding: 0 20px;
    cursor: pointer;
  }
  .el-icon-arrow-left {
    margin-right: 20px;
  }
  .right-panel {
    float: right;
    height: 100%;
    width: 100px;
    display: flex;
    align-items: center;
    padding-right: 15px;
    flex-direction: row-reverse;
  }
}
</style>
